import React, { useEffect, useState } from "react";
import { Input, Space } from 'antd';

export default function Resolution(props) {

    const {width,height,changeResolution} = props;
    const [resolution,setResolution] = useState({
        width:width,
        height:height
    });
    useEffect(() => {
        setResolution({
            width:width,
            height:height
        })
    }, [width,height]);

    const changeWidth = (val) => {
        //setWidth(val.target.value);
        setResolution({
            ...resolution,
            width:val.target.value
        });
    };

    const changeHeight = (val) => {
        //setHeight(val.target.value);
        setResolution({
            ...resolution,
            height:val.target.value
        });
    };

    const changeValue = () => {
        changeResolution(resolution['width'],resolution['height']);
    };

    return (
        <div>
            <Space>
                <span>宽：</span>
                <Input value={resolution['width']} placeholder="例：1920" onBlur={()=>changeValue()} onChange={(val)=>changeWidth(val)} />
                <span>高：</span>
                <Input value={resolution['height']} placeholder="例：1080" onBlur={()=>changeValue()} onChange={(val)=>changeHeight(val)} />
            </Space>
        </div>
    );
}